<script lang="ts" setup>
import {
  addCategory,
  deleteCategory,
  getCategory,
  getCategoryOne,
  modifyCategory,
} from "@/api";
interface Category {
  cid: number;
  classification: string;
  createTime: string;
  deleted: string;
  coverImage?: string;
}
const multipleTableRef = shallowRef<HTMLElement>();
const tableData = ref<Category[]>([]);
onMounted(async () => {
  const { data } = await getCategory();
  console.log(data);
  data.forEach((d: Category) => {
    tableData.value.push({
      cid: d.cid,
      classification: d.classification,
      coverImage: d.coverImage,
      createTime: d.createTime,
      deleted: d.deleted,
    });
  });
});
const formValue = ref<Category>();
const handleEdit = (i: number, row: any) => {
  console.log(i);
  formValue.value = row as Category;
  console.log(row);
};
const handleDelete = async (i: number, row: any) => {
  const { data } = await deleteCategory(row.cid);
  if (data) {
    ElMessage({
      showClose: true,
      message: "删除成功",
      type: "success",
      center: true,
    });
  } else {
    ElMessage({
      showClose: true,
      message: "删除失败",
      type: "error",
      center: true,
    });
  }
};
const add = () => {
  centerDialogVisible.value = true;
};
const centerDialogVisible = ref(false);
</script>
<template>
  <div>
    <header class="flex justify-end">
      <el-button @click="add"> 新增 </el-button>
      <el-button @click="() => {}"> 批量删除 </el-button>
    </header>
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column label="cid" width="120">
        <template #default="{ row }">
          {{ row.cid }}
        </template>
      </el-table-column>
      <el-table-column
        property="classification"
        label="classification"
        width="120"
      />
      <el-table-column
        label="createTime"
        property="createTime"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column label="deleted" prop="deleted" />
      <el-table-column label="Operations">
        <template #default="scope">
          <el-button
            @click="handleEdit(scope.$index, scope.row)"
            type="success"
          >
            Edit
          </el-button>
          <el-button
            @click="handleDelete(scope.$index, scope.row)"
            type="danger"
          >
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="centerDialogVisible"
      title=""
      width="500"
      center
      align-center
    >
      <span>
        It should be noted that the content will not be aligned in center by
        default
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="centerDialogVisible = false">
            Confirm
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped></style>
